<template>
  <CommondCard title="累计用户数" :value="numberFormat(usersTotal)">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <span>日同比 </span>
      <span class="emphasis">
        {{ numberFormat(userGrowthLastDay) }}% &nbsp;</span
      >
      <span class="increment"></span>
      <span>&nbsp; 月同比 </span>
      <span class="emphasis"> {{ numberFormat(userGrowthLastMonth) }}% </span>
      <span class="decrement"></span>
    </template>
  </CommondCard>
</template>

<script lang="ts">
export default {
  name: 'TotalUsers',
};
</script>
<script lang="ts" setup>
import CommondCard from './CommonCard.vue';
import { computed, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();

// 获取页面中的标签对象
const barChartRef = ref();
let barChart: EChartsType;

// 1. 累计用户数
const usersTotal = computed(() => reportDataStore.reportData.usersTotal);

// 2. 上月用户数量
const usersLastMonth = computed(
  () => reportDataStore.reportData.usersLastMonth
);

// 3. 日同比
const userGrowthLastDay = computed(
  () => reportDataStore.reportData.userGrowthLastDay
);

// 4. 月同比
const userGrowthLastMonth = computed(
  () => reportDataStore.reportData.userGrowthLastMonth
);

const getOption = () => {
  return {
    xAxis: {
      show: false,
      min: 0,
      max: 100,
    },
    yAxis: {
      show: false,
      data: ['AAA'],
    },
    series: {
      name: '用户增长量',
      type: 'bar',
      data: [78],
      barWidth: 10,
      showBackground: true,
      itemStyle: {
        color: 'blue',
      },
    },
    grid: {
      left: 0,
      right: 0,
    },
    tooltip: {
      trigger: 'axis',
    },
    label: {
      show: true,
      formatter: '|',
      position: 'right',
      color: 'orangered',
    },
  };
};

// 1. 当页面组件挂载完毕的时候 要执行钩子函数
onMounted(() => {
  barChart = echarts.init(barChartRef.value);

  barChart.setOption(getOption());

  window.addEventListener('resize', () => {
    barChart.resize();
  });
});
</script>

<style></style>
